<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-form :form="form" :selfUpdate="true" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 10 } }">
        <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
        <a-form-item v-show="signatureItem && signatureItem.id" label="ID">
          <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="签名">
          <a-input
            addon-before="【"
            addon-after="】"
            v-decorator="['name', { rules: [{ required: true, message: '签名不能为空' }] }]"
            placeholder="请输入签名"
          />
          <div><a-icon type="info-circle" /> 无须添加【】 、()、符号，签名发送会自带【】符号，避免重复</div>
        </a-form-item>

        <a-form-item label="签名来源">
          <a-select
            placeholder="请选择签名来源"
            v-decorator="['signSource', { rules: [{ required: true, message: '签名用途不能为空' }] }]"
          >
            <a-select-option v-for="it in signSourceList" :value="it.id" :key="it.id">{{it.name}}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="签名用途">
          <a-radio-group
            v-decorator="['signType', { rules: [{ required: true, message: '签名用途不能为空' }], initialValue: 1 }]"
            @change="onChangeSignType"
          >
            <div><a-radio :value="1"> 企业使用，签名用于自有产品 </a-radio></div>
            <div><a-radio :value="2"> 企业使用，签名用于非自有产品 </a-radio></div>
            <!-- <div><a-radio :value="3"> 个人使用 </a-radio></div> -->
          </a-radio-group>
        </a-form-item>
        <!-- <a-form-item label="类型">
          <a-select
            v-decorator="['type', { rules: [{ required: true, message: '类型不能为空' }] }]"
            placeholder="请选择类型"
          >
            <a-select-option v-for="it in templateTypeList" :key="it.id" :value="it.id">{{ it.name }}</a-select-option>
          </a-select>
        </a-form-item> -->
        
        
        <!-- <a-form-item label="产品">
          <AWM-select
            v-decorator="['productId', { rules: [{ required: true, message: '产品不能为空' }] }]"
            placeholder="请输入选择产品"
            funStr="productByNoAuth"
          ></AWM-select>
        </a-form-item>
        <a-form-item label="平台">
          <AWM-select
            v-decorator="['platformId', { rules: [{ required: true, message: '平台不能为空' }] }]"
            placeholder="请输入平台产品"
            funStr="platformByNoAuth"
          ></AWM-select>
        </a-form-item> -->
        <a-form-item :label="`${fileText.licenseFile}`">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action=""
            accept="image/png, image/jpeg"
            v-decorator="['licenseFile', { rules: [{ required: false, message: `${fileText.licenseFile}不能为空` }] }]"
            :customRequest="(file) => handleChangeAttr(file, 'licenseFile')"
          >
            <img v-if="licenseFile.file" :src="`${licenseFile.file}`" alt="avatar" class="upload-img" />
            <div v-else>
              <a-icon :type="licenseFile.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
            
          </a-upload>
          
          <div class="upload-text" v-if="signValue == 3">
            <a target="_blank" href="http://pic.bjzzxxjs.com/identity-f.gif">身份证正面</a>
            <div>JPG或PNG格式，文件大小不超过5M</div>
          </div>
          <div class="upload-text" v-else>
            <a target="_blank" href="http://pic.bjzzxxjs.com/business-certificate.jpg">营业执照.jpg</a>
            <div>JPG或PNG格式，文件大小不超过5M</div>
          </div>
        </a-form-item>

        <!--   授权单位营业执照/个人身份证反面 -->
        <a-form-item :label="`${fileText.mandateLicenseFile}`" v-if="signValue != 1">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/"
            accept="image/png, image/jpeg"
            v-decorator="['mandateLicenseFile', { rules:[{ required: false, message: `${fileText.mandateLicenseFile}不能为空` }]}]"
            :customRequest="(file) => handleChangeAttr(file, 'mandateLicenseFile')"
          >
            <img
              v-if="mandateLicenseFile.file"
              :src="`${mandateLicenseFile.file}`"
              alt="avatar"
              class="upload-img"
            />
            <div v-else>
              <a-icon :type="mandateLicenseFile.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
          <div class="upload-text" v-if="signValue == 3">
            <a target="_blank" href="http://pic.bjzzxxjs.com/identity-b.gif">身份证反面</a>
            <div>JPG或PNG格式，文件大小不超过5M</div>
          </div>
          <div class="upload-text" v-if="signValue == 2">
            <a target="_blank" href="http://pic.bjzzxxjs.com/business-certificate.jpg">授权单位营业执照.jpg</a>
            <div>JPG或PNG格式，文件大小不超过5M</div>
          </div>
        </a-form-item>

        <a-form-item :label="fileText.mandateFile">
          <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="/"
            accept="image/png, image/jpeg"
            v-decorator="['mandateFile',{rules: signValue == 2 ? [ { required: true, message: `${fileText.mandateFile}不能为空` }]:[]}]"
            :customRequest="(file) => handleChangeAttr(file, 'mandateFile')"
          >
            <img v-if="mandateFile.file" :src="`${mandateFile.file}`" alt="avatar" class="upload-img" />
            <div v-else>
              <a-icon :type="mandateFile.loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
          <div class="upload-text" v-if="signValue == 2">
            <a target="_blank" href="http://pic.bjzzxxjs.com/sign-s.docx">下载授权文件模板</a>
            <div>JPG或PNG格式，文件大小不超过5M</div>
          </div>
          <div class="upload-text" v-else>
            <a target="_blank" href="http://pic.bjzzxxjs.com/sign-t.docx">下载短信证明模板</a>
            <div>JPG或PNG格式，文件大小不超过5M</div>
          </div>


        </a-form-item>
        <a-form-item :label="`备注`">
          <a-textarea :rows="3" v-decorator="['remark']" placeholder="请简单述下你申请的短信签名的使用场景，以便我们能更快的审核"></a-textarea>
        </a-form-item>
        <a-form-item label="用户">
          <AWM-select
            v-decorator="['userId', { rules: [{ required: true, message: '用户不能为空' }] }]"
            placeholder="请输入选择用户"
            funStr="userListByNoAuth"
          ></AWM-select>
        </a-form-item>
        <!-- <a-form-item label="状态">
          <a-select
            v-decorator="['status', { rules: [{ required: true, message: '状态不能为空' }] }]"
            placeholder="请选择状态"
          >
            <a-select-option v-for="it in signatureStatusList" :key="it.id" :value="it.id">{{ it.name }}</a-select-option>
          </a-select>
        </a-form-item> -->
        <a-form-item :wrapperCol="{ sm: { offset: 4, span: 10 } }">
          <a-button type="primary" @click="handleOk" :loading="confirmLoading"> 确定 </a-button>
          <a-button @click="handleCancel" style="margin-left: 10px"> 取消 </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import pick from 'lodash.pick'
import { getPlatformTemplateList, signatureUpdate, signatureAdd } from '@/api/sms'
import { templateTypeList, templateStatusList, signatureStatusList, signSourceList } from '@/utils/other'
import { uploadForQiniu } from '@/utils/qiniu'
import AWMSelect from '@/components/AWMSelect'
import { mapGetters } from 'vuex'
// 表单字段
const  fields = ['licenseFile', 'name', 'productId', 'platformId', 'signSource', 'signType', 'mandateFile', 'mandateLicenseFile', 'id', 'remark', 'userId', 'status']


export default {
  name: 'form-platform-template',
  props: {
    model: {
      type: Object,
      default: () => null,
    },
  },
  data() {
    return {
      form: this.$form.createForm(this),
      city: '',
      inviteUserList: [],
      timeout: null,
      fetching: false,
      projectType: [],
      signValue: 1, 
      templateTypeList,
      signatureStatusList,
      signSourceList,
      mandateFile: {
        file: '',
        loading: false,
      }, //授权文件
      mandateLicenseFile: {
        file: '',
        loading: false,
      }, // 授权单位营业执照/个人身份证反面
      licenseFile: {
        file: '',
        loading: false,
      },
      confirmLoading: false
    }
  },
  components: {
    AWMSelect,
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v))

    const route = this.$route
    console.log(route)
    if (route.path.indexOf('/update/') != -1) {
      this.id = route.params.id
      if (this.signatureItem.id) {
        let data = pick(this.signatureItem, fields)
        this.form.setFieldsValue(data)
        this.mandateFile.file = data.mandateFile
        this.mandateLicenseFile.file = data.mandateLicenseFile
        this.licenseFile.file = data.licenseFile
      } else {
        this.handleCancel()
      }
    }
  },
  methods: {
    onChangeSignType(a_value) {
      console.log(a_value.target.value)
      this.signValue = a_value.target.value
    },
    handleChangeAttr(a_files, a_str) {
      let that = this;
      console.log(a_files.file);
      const fileReader = new FileReader()
      fileReader.readAsDataURL(a_files.file)
      fileReader.onload = function () {
        that[a_str].file = this.result
      }
    },
   handleOk() {
      let self = this
      const form = self.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        console.log(errors, values)
        if (!errors) {
          console.log();
          values.licenseFile = self.licenseFile.file
          values.mandateLicenseFile = self.mandateLicenseFile.file
          values.mandateFile = self.mandateFile.file
          if (values.id > 0) {
            signatureUpdate(values)
              .then((res) => {
                self.handleCancel()
                self.$message.success('提交成功!')
              }).finally(()=>{
                self.confirmLoading = false
              })
          } else {
            console.log(222)
            delete values.id
            signatureAdd(values)
              .then((res) => {
                self.$message.success('提交成功!')
                self.handleCancel()
              }).finally(()=>{
                self.confirmLoading = false
              })
          }
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      // this.$router.push({path: ''})
      this.$store.dispatch('SignatureBackList', '').then(() => {
        let query = this.$route.query
        this.$router.push({ path: `/signature-list/list`, query })
      })
    },
  },
  computed: {
    ...mapGetters({ baseUrl: 'baseUrl', signatureItem: 'signatureItem' }),
    fileText: function () {
      let self = this
      // mandateFile: '',   //授权文件
      // mandateLicenseFile: '', // 授权单位营业执照/个人身份证反面
      // licenseFile : '',       // 营业执照/个人身份证正面
      const signValue = this.signValue
      if (signValue == 3) {
        return {
          mandateLicenseFile: '个人身份证反面', // 授权单位营业执照/
          licenseFile: '个人身份证正面', // 营业执照/
          mandateFile: '其他证明信息'
          
        }
      } else if(signValue == 2) {
        return {
          mandateLicenseFile: '授权单位营业执照', // /
          licenseFile: '营业执照', // /
          mandateFile: '授权文件'
        }
      }else{
        return {
          mandateLicenseFile: '授权单位营业执照', // /
          licenseFile: '营业执照', // /
          mandateFile: '其他证明信息'
        }
      }
    },
  },
  watch: {},
}
</script>
<style scoped lang="less">
.upload-img {
  max-width: 84px;
  max-height: 84px;
}
// /deep/ .ant-form-item {
//   margin-bottom: 10px;
//   .ant-form-item-label {
//     line-height: 28px;
//   }
// }
.ant-collapse-content-box {
  p {
    line-height: 24px;
    margin-bottom: 5px;
  }
  .desc-exp {
    display: inline-block;
    max-width: 330px;
    & > span{
            display: block;
        margin-right: 5px;
        text-align: center;
        &:first-child {
      border-bottom: 1px solid #999;
    }
    }
  }
}
.upload-text{
  line-height: 25px;
  font-size: 12px;
  margin-top: -15px;
  div{
    margin: 5px 0;
    font-size: 12px;
    color: rgba(0,0,0,.45);
    line-height: 1.5;
    padding-top: 0;
  }
  a{
    line-height: 25px;
    font-size: 12px;
    display: inline-block;
  }
}
</style>

 